<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizable Demo</title>
<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

<script src="../jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.dimensions.js"></script>

<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>

<style>
.proxy { border: 1px dashed #000; };
</style>

</head>
<body class="flora">

<h2>1. Default, no options, three handles</h2>
<div class="playground">
	<div id='simpleResize' class="ui-wrapper example" style="height:100px; width: 350px;">
		<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>
			Resize me<br/>
			I was made resizable with this code only:<br/> $('div').resizable({ minHeight: 100, minWidth: 350 });
		</div>
	</div><br />
	<button onclick="$('#simpleResize').resizable('enable')">Enable</button>
	<button onclick="$('#simpleResize').resizable('disable')">Disable</button>
</div>

<h2>2. Autohiding handles (all directions)</h2>
<div class="playground">
	<div id='autoHideAllHandles' class="ui-wrapper example" style="height:100px; width: 350px; position:relative;">
		<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>
			Resize me<br/>
			I was made resizable with this code only:<br/> $('div').resizable({ handles: 'all', autohide: true, minHeight: 100, minWidth: 350 });
		</div>
	</div>
</div>


<h2>3. Textareas and Inputs</h2>

<div class="playground">
	
<textarea id='simpleTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
	
I was made resizable with this code only:
$('#simpleTextarea').resizable({ minHeight: 50, minWidth: 150 });</textarea>

<br />

<textarea id='autohideTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
	
I was made resizable with this code only:
$('#autohideTextarea').resizable({ autohide: true, minHeight: 50, minWidth: 150 });</textarea>

<br />

<textarea id='transparentTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
	
I was made resizable with this code only:
$('#transparentTextarea').resizable({ transparent: true, handles: 'all', minHeight: 50, minWidth: 150 });</textarea>

<br />

<textarea id='allHandlesTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
	
I was made resizable with this code only:
$('#allHandlesTextarea').resizable({ handles: 'all', proxy:'proxy', minHeight: 50, minWidth: 150 });</textarea>

<br />

<input id="simpleInputText" type="text" value="Input Text Resizing example!" class="example" style="margin: 0px; padding: 0px; width: 200px; height: 30px;">

<br />

<input id="simpleInputButton" type="button" value="Button Resizing!" style="margin: 0px; padding: 0px; height: 30px;">


</div>


<h2>4. Images</h2>
<div class="playground">
	
	<b>4.1 Preserve Aspect Ratio</b><br>
	$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' }); <br><br>
	
	<img style='margin: 0;' id="preserveRatioImage" src="images/resizable.jpg" title="$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' });" /><br>
	
	<b>4.2 Image Resize with a helper (proxy) - Increases Performance!</b><br>
	$('#proxyImage').resizable({ proxy: 'proxy', aspectRatio: 'preserve' }); <br><br>
	
	<img style='margin: 0;' id="proxyImage" src="images/resizable.jpg" title="$('#proxyImage').resizable({ proxy: 'proxy', aspectRatio: 'preserve' });" /><br>
	
	<b>4.3 Transparent Handles</b><br>
	$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' }); <br><br>
	
	<img style='margin: 0;' id="transparentImage" src="images/resizable.jpg" title="$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' });" /><br>
	
	<b>4.4 Simple Image Resize without a helper (proxy)</b><br>
	$('#simpleImage').resizable(); <br><br>
	
	<img style='margin: 0;' id="simpleImage" src="images/resizable.jpg" title="$('#simpleImage').resizable();" /><br>

	
</div>
<script type="text/javascript">

$(window).bind("load",function(){

	$('#simpleResize').resizable({ minHeight: 100, minWidth: 350 });
	$('#autoHideAllHandles').resizable({ handles: 'all', autohide: true, minHeight: 100, minWidth: 350 });
	$('#simpleTextarea').resizable({ minHeight: 50, minWidth: 150 });
	$('#autohideTextarea').resizable({ autohide: true, minHeight: 50, minWidth: 150 });
	$('#transparentTextarea').resizable({ transparent: true, handles: 'all', minHeight: 50, minWidth: 150 });
	$('#allHandlesTextarea').resizable({ handles: 'all', proxy:'proxy', minHeight: 50, minWidth: 150 });
	$('#simpleInputText').resizable();
	$('#simpleInputButton').resizable();
	
	$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' });
	$('#proxyImage').resizable({proxy: 'proxy', aspectRatio: 'preserve' });
	$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' });
	$('#simpleImage').resizable();

});
</script>
</body>
</html>
